<template> 
    <div class="chat-container"> 
        <div class="chat-header"> 
            <div class="header-left">
                <h2>AI 智能助手</h2>
            </div>
            <div class="header-buttons">
                <el-button type="primary" @click="startNewSession" class="action-button">
                    <el-icon><Plus /></el-icon>
                    <span class="button-text">新会话</span>
                </el-button>
                <el-button type="info" @click="showHistory = true" class="action-button">
                    <el-icon><Clock /></el-icon>
                    <span class="button-text">历史记录</span>
                </el-button>
                <el-button type="warning" @click="showSettings = true" class="action-button">
                    <el-icon><Setting /></el-icon>
                    <span class="button-text">设置</span>
                </el-button>
            </div>
        </div> 
        <div v-if="messages.length === 0" class="welcome-section"> 
            <div class="welcome-content">
                <h3>欢迎使用AI对话平台</h3> 
                <p>这是一个强大的AI对话工具，可以帮助您解决各种问题。</p> 
                <el-divider /> 
                <div class="feature-cards"> 
                    <el-card class="feature-card" :body-style="{ padding: '20px' }"> 
                        <template #header>
                            <div class="card-header">
                                <el-icon><Star /></el-icon>
                                <span>功能特点</span>
                            </div>
                        </template>
                        <ul> 
                            <li><el-icon><Check /></el-icon>支持流式响应</li> 
                            <li><el-icon><Check /></el-icon>多API接口调用</li> 
                            <li><el-icon><Check /></el-icon>对话历史记录</li> 
                            <li><el-icon><Check /></el-icon>Markdown格式支持</li>
                            <li><el-icon><Check /></el-icon>代码高亮显示</li>
                        </ul> 
                    </el-card> 
                    <el-card class="feature-card" :body-style="{ padding: '20px' }"> 
                        <template #header>
                            <div class="card-header">
                                <el-icon><Guide /></el-icon>
                                <span>使用指南</span>
                            </div>
                        </template>
                        <ol> 
                            <li>点击右上角"设置"按钮配置API密钥</li> 
                            <li>在下方输入框输入您的问题</li> 
                            <li>点击发送按钮或按Enter键</li> 
                            <li>查看AI的回复</li> 
                        </ol> 
                    </el-card> 
                </div> 
            </div>
        </div> 
        <div class="chat-messages" ref="messagesContainer"> 
            <div v-for="(msg, index) in messages" :key="index" class="message"> 
                <div class="message-avatar">
                    <el-avatar :size="40" :icon="msg.sender === 'user' ? 'User' : 'Service'" />
                </div>
                <div :class="['message-content', msg.sender]">  
                    <div class="message-text" v-if="msg.sender === 'user'">{{ msg.content }}</div>
                    <div class="message-text markdown-body" v-else v-html="renderMarkdown(msg.content)"></div>
                    <div class="message-time">{{ formatMessageTime(msg.created_at) }}</div>
                </div> 
            </div> 
        </div> 
        <div class="chat-input"> 
            <div class="input-container">
                <el-upload
                    class="upload-button"
                    action="http://10.253.17.12:5000/api/upload"
                    :show-file-list="false"
                    :on-success="handleUploadSuccess"
                    :on-error="handleUploadError"
                    :before-upload="beforeUpload"
                    :headers="uploadHeaders"
                    accept="image/*"
                    name="file"
                >
                    <el-button type="primary" :loading="uploadLoading">
                        <el-icon><Upload /></el-icon>
                    </el-button>
                </el-upload>
                <el-input 
                    v-model="inputMessage" 
                    placeholder="输入消息..." 
                    @keyup.enter="sendMessage"
                    :disabled="!apiKeyForm.apiKey"
                    type="textarea"
                    :rows="3"
                    resize="none"
                > 
                    <template #append> 
                        <el-button @click="sendMessage" :disabled="!inputMessage.trim()" type="primary">
                            <el-icon><Position /></el-icon>
                            发送
                        </el-button> 
                    </template> 
                </el-input>
            </div>
        </div> 
        <el-dialog v-model="dialogVisible" title="功能对话框" fullscreen> 
            <div class="dialog-content"> 
                <div class="response-content"> 
                    {{ streamResponse }} 
                </div> 
            </div> 
            <template #footer> 
                <el-button type="primary" @click="callApi('API1请求')">调用API1</el-button> 
                <el-button type="success" @click="callApi('API2请求')">调用API2</el-button> 
                <el-button @click="dialogVisible = false">关闭</el-button> 
            </template> 
        </el-dialog> 
        <!-- 历史记录对话框 -->
        <el-dialog
            v-model="showHistory"
            title="历史会话记录"
            width="70%"
            destroy-on-close
        >
            <div class="history-container">
                <el-table 
                    :data="chatHistory" 
                    style="width: 100%"
                    :stripe="true"
                    :border="true"
                    v-loading="loading"
                >
                    <el-table-column prop="created_at" label="时间" width="180">
                        <template #default="scope">
                            {{ formatDate(scope.row.created_at) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="last_message" label="最后消息" show-overflow-tooltip />
                    <el-table-column prop="message_count" label="消息数量" width="100" align="center" />
                    <el-table-column label="操作" width="150" fixed="right">
                        <template #default="scope">
                            <el-button @click="loadSession(scope.row.session_id)" type="primary" size="small">
                                <el-icon><View /></el-icon>
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <!-- 设置对话框 -->
        <el-dialog
            v-model="showSettings"
            title="系统设置"
            width="500px"
            destroy-on-close
        >
            <div class="settings-container">
                <el-form :model="apiKeyForm" :rules="apiKeyRules" ref="apiKeyFormRef" label-position="top">
                    <el-form-item label="API密钥" prop="apiKey">
                        <el-input 
                            v-model="apiKeyForm.apiKey" 
                            placeholder="请输入API密钥" 
                            show-password
                            class="api-key-input"
                        >
                            <template #prefix>
                                <el-icon><Key /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveApiKey" :icon="Check" class="save-button">
                            保存设置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div> 
</template> 
 
<script> 
import { Plus, Clock, Key, Check, Star, Guide, Position, View, User, Service, Setting, Upload } from '@element-plus/icons-vue'
import md from '../utils/markdown'

export default { 
    name: 'ChatWindow',
    components: {
        Plus,
        Clock,
        Key,
        Check,
        Star,
        Guide,
        Position,
        View,
        User,
        Service,
        Setting,
        Upload
    },
    data() {
        return {
            messages: [], 
            inputMessage: '', 
            dialogVisible: false, 
            streamResponse: '', 
            sessionId: localStorage.getItem('sessionId') || this.generateSessionId(),
            dialogForm: { 
                name: '', 
                email: '' 
            }, 
            apiKeyForm: { 
                apiKey: localStorage.getItem('apiKey') || '' 
            }, 
            apiKeyRules: { 
                apiKey: [ 
                    {required: true, message: '请输入API密钥', trigger: 'blur'} 
                ] 
            }, 
            rules: { 
                name: [ 
                    {required: true, message: '请输入姓名', trigger: 'blur'} 
                ], 
                email: [ 
                    {required: true, message: '请输入邮箱', trigger: 'blur'}, 
                    {type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change']} 
                ] 
            }, 
            apiKeyFormRef: null,
            showHistory: false,
            chatHistory: [],
            loading: false,
            showSettings: false,
            uploadLoading: false,
            uploadHeaders: {
                'X-API-KEY': localStorage.getItem('apiKey') || ''
            }
        }; 
    },
    watch: {
        showHistory(newVal) {
            if (newVal) {
                this.loadChatHistory();
            }
        },
        messages: {
            handler() {
                this.$nextTick(() => {
                    this.scrollToBottom();
                });
            },
            deep: true
        }
    },
    mounted() {
        this.loadChatHistory();
    },
    methods: { 
        scrollToBottom() {
            const container = this.$refs.messagesContainer;
            if (container) {
                container.scrollTop = container.scrollHeight;
            }
        },
        formatMessageTime(timestamp) {
            if (!timestamp) return '';
            const date = new Date(timestamp);
            return date.toLocaleTimeString();
        },
        generateSessionId() {
            // 生成一个随机的会话ID
            const newSessionId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                const r = Math.random() * 16 | 0;
                const v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
            // 保存到本地存储
            localStorage.setItem('sessionId', newSessionId);
            return newSessionId;
        },
        // 添加新方法：开始新会话
        startNewSession() {
            this.sessionId = this.generateSessionId();
            this.messages = []; // 清空消息历史
            this.$message.success('已开始新会话');
        },
        saveApiKey() { 
            this.$refs.apiKeyFormRef.validate((valid)  => { 
                if (valid) { 
                    localStorage.setItem('apiKey',  this.apiKeyForm.apiKey);  
                    this.$message.success('API 密钥保存成功'); 
                } else { 
                    this.$message.error(' 请输入有效的API密钥'); 
                } 
            }); 
        }, 
        handleSubmit() { 
            console.log('  表单提交:', this.dialogForm);  
            this.dialogVisible  = false; 
        }, 
        async sendMessage() { 
            if (this.inputMessage.trim())  { 
                // 如果是新会话，生成新的会话ID
                if (!this.sessionId) {
                    this.sessionId = this.generateSessionId();
                }
                
                const userMessage = this.inputMessage;  
                this.messages.push({  
                    sender: 'user', 
                    content: userMessage 
                }); 
                this.inputMessage  = ''; 
 
                try { 
                    const response = await fetch('http://10.253.17.12:5000/api/chat', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-API-KEY': localStorage.getItem('apiKey')  || ''
                        },
                        body: JSON.stringify({  
                            message: userMessage,
                            session_id: this.sessionId
                        }) 
                    }); 
 
                    if (!response.ok)  { 
                        throw new Error(`API调用失败，状态码: ${response.status}`);  
                    } 
 
                    const aiTopMessage = { 
                        sender: 'ai', 
                        content: '请求已收到，正在处理中...', 
                        isStreaming: true 
                    }; 
                    const aiMessage = { 
                        sender: 'ai', 
                        content: '', 
                        isStreaming: true 
                    }; 
                    // this.messages.push(aiTopMessage);  
                    this.messages.push(aiMessage);  
                    const messageIndex = this.messages.length  - 1; 
 
                    const sessionId = response.headers.get('X-Session-ID');
                    if (sessionId) {
                        this.sessionId = sessionId;
                    }
                    await this.handleStreamResponse(response,  messageIndex); 
                } catch (error) { 
                    console.error('API  调用失败:', error); 
                    this.messages.push({  
                        sender: 'ai', 
                        content: `抱歉，发生错误: ${error.message}`  
                    }); 
                } 
            } 
        }, 
        async handleStreamResponse(response, messageIndex) { 
            const reader = response.body.getReader();  
            const decoder = new TextDecoder(); 
            let partialData = ''; 
 
            while (true) { 
                const {done, value} = await reader.read();  
                if (done) break; 
 
                const chunk = decoder.decode(value,  {stream: true}); 
                partialData += chunk; 
               
 
                try { 
                    const jsonObjects = partialData.split('\n').filter(str  => str.trim());  
                 
                    for (const jsonStr of jsonObjects) { 
                        try { 
                            // 尝试解析 JSON 字符串
                            // const data = JSON.parse(jsonStr);
                            const data = JSON.parse(jsonStr);  
                                                    //查看 jsonStr类型
                        console.log('data 对象内容:', typeof jsonStr);
                            // console.log('data 对象内容3:', typeof data);
                            if (data.error)  { 
                                throw new Error(data.error);  
                            }
                            if (!data.choices || !Array.isArray(data.choices) || data.choices.length === 0) {
                                continue;
                            }
       
                            
                            if (data.choices && data.choices[0].delta)  { 
                                const content = data.choices[0].delta.content  || ''; 
                                const finishReason = data.choices[0].finish_reason;  
                                
                                if (content) { 
                                    this.messages[messageIndex].content  += content; 
                                    this.$forceUpdate(); 
                                } 
 
                                if (finishReason) { 
                                    this.messages[messageIndex].isStreaming  = false; 
                                    break; 
                                } 
                            } 
                        } catch (e) { 
                            if (!(e instanceof SyntaxError)) { 
                                throw e; 
                            } 
                        } 
                    } 
                    partialData = ''; 
                } catch (e) { 
                    if (!(e instanceof SyntaxError)) { 
                        console.error(' 解析错误:', e); 
                        this.messages[messageIndex].content  = `抱歉，发生错误: ${e.message}`;  
                        this.$forceUpdate(); 
                        break; 
                    } 
                } 
            } 
        }, 
        callApi(requestType) { 
            // 这里可以添加调用API的逻辑 
            console.log(` 调用 ${requestType}`); 
        },
        async loadChatHistory() {
            try {
                console.log('开始加载历史记录...');
                const apiKey = localStorage.getItem('apiKey');
                if (!apiKey) {
                    this.$message.warning('请先设置API密钥');
                    return;
                }

                const response = await fetch('http://10.253.17.12:5000/api/chat/history', {
                    headers: {
                        'X-API-KEY': apiKey
                    }
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '获取历史记录失败');
                }
                
                const data = await response.json();
                console.log('历史记录数据:', data);
                
                if (data.history) {
                    this.chatHistory = data.history;
                    console.log('历史记录加载成功，共', this.chatHistory.length, '条记录');
                } else {
                    console.warn('历史记录数据格式不正确:', data);
                    this.chatHistory = [];
                }
            } catch (error) {
                console.error('加载历史记录失败:', error);
                this.$message.error('获取历史记录失败: ' + error.message);
                this.chatHistory = [];
            }
        },
        
        async loadSession(sessionId) {
            try {
                console.log('开始加载会话记录:', sessionId);
                const apiKey = localStorage.getItem('apiKey');
                if (!apiKey) {
                    this.$message.warning('请先设置API密钥');
                    return;
                }

                const response = await fetch(`http://10.253.17.12:5000/api/chat/session/${sessionId}`, {
                    headers: {
                        'X-API-KEY': apiKey
                    }
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '获取会话记录失败');
                }
                
                const data = await response.json();
                console.log('会话记录数据:', data);
                
                if (data.messages) {
                    this.messages = data.messages.map(msg => ({
                        sender: msg.sender,
                        content: msg.content
                    }));
                    this.sessionId = sessionId;
                    this.showHistory = false;
                    this.$message.success('已加载历史会话');
                } else {
                    console.warn('会话记录数据格式不正确:', data);
                    this.$message.warning('会话记录数据格式不正确');
                }
            } catch (error) {
                console.error('加载会话记录失败:', error);
                this.$message.error('获取会话记录失败: ' + error.message);
            }
        },
        formatDate(dateStr) {
            const date = new Date(dateStr);
            return date.toLocaleString();
        },
        renderMarkdown(content) {
            return md.render(content);
        },
        beforeUpload(file) {
            const isImage = file.type.startsWith('image/');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isImage) {
                this.$message.error('只能上传图片文件！');
                return false;
            }
            if (!isLt2M) {
                this.$message.error('图片大小不能超过 2MB！');
                return false;
            }
            this.uploadLoading = true;
            return true;
        },
        handleUploadSuccess(response, file) {
            this.uploadLoading = false;
            if (response.success) {
                this.$message.success('图片上传成功');
                // 将图片URL添加到消息输入框
                const imageUrl = `http://10.253.17.12:5000${response.url}`;
                this.inputMessage += `\n![${file.name}](${imageUrl})`;
            } else {
                this.$message.error(response.error || '上传失败');
            }
        },
        handleUploadError(error) {
            this.uploadLoading = false;
            this.$message.error('图片上传失败：' + (error.message || '未知错误'));
        }
    }
} 
</script> 
 
<style scoped> 
.chat-container { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    padding: 20px; 
    background-color: #f5f7fa; 
} 

.chat-header { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left h2 {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin: 0;
}

.welcome-section { 
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
} 

.welcome-content {
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.welcome-content h3 {
    font-size: 28px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
}

.welcome-content p {
    font-size: 16px;
    color: #606266;
    line-height: 1.8;
    margin-bottom: 24px;
}

.feature-cards { 
    display: flex; 
    gap: 20px; 
    margin-top: 20px; 
} 

.feature-card { 
    flex: 1; 
    min-width: 0;
    transition: transform 0.3s;
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    overflow: hidden;
} 

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    padding: 16px 20px;
    border-bottom: 1px solid #dcdfe6;
}

.card-header span {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.feature-card ul li,
.feature-card ol li {
    margin: 12px 0;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.feature-card ul li .el-icon,
.feature-card ol li .el-icon {
    color: #67c23a;
    font-size: 18px;
}

:deep(.el-divider) {
    margin: 24px 0;
}

.chat-messages { 
    flex: 1; 
    overflow-y: auto; 
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
} 

.message { 
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
} 

.message-avatar {
    flex-shrink: 0;
}

.message-content { 
    padding: 12px 16px;
    border-radius: 8px;
    max-width: 70%;
    position: relative;
} 

.message-content.user { 
    background-color: #e3f2fd; 
    margin-left: auto;
    color: #0d47a1; 
} 

.message-content.ai { 
    background-color: #f3e5f5; 
    margin-right: auto;
    color: #4a148c; 
} 

.message-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    text-align: right;
}

.chat-input { 
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
} 

.history-container {
    max-height: 60vh;
    overflow-y: auto;
}

:deep(.el-card__header) {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #f5f7fa;
}

:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
}

:deep(.el-table th) {
    background-color: #f5f7fa;
}

:deep(.el-button) {
    display: flex;
    align-items: center;
    gap: 4px;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #409eff inset;
}

:deep(.el-textarea__inner) {
    resize: none;
    padding: 12px;
    line-height: 1.5;
}

.header-buttons {
    display: flex;
    gap: 16px;
}

.action-button {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button-text {
    text-transform: uppercase;
    letter-spacing: 1px;
}

:deep(.el-button) {
    display: flex;
    align-items: center;
    gap: 8px;
}

:deep(.el-button .el-icon) {
    font-size: 18px;
}

:deep(.el-button--primary) {
    background: linear-gradient(135deg, #409eff 0%, #2b85e4 100%);
    border: none;
}

:deep(.el-button--info) {
    background: linear-gradient(135deg, #909399 0%, #606266 100%);
    border: none;
}

:deep(.el-button--primary:hover) {
    background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
}

:deep(.el-button--info:hover) {
    background: linear-gradient(135deg, #a6a9ad 0%, #909399 100%);
}

/* 优化日志显示 */
.message-content {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6;
}

.message-content.user {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 1px solid #90caf9;
}

.message-content.ai {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border: 1px solid #ce93d8;
}

.message-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 15px;
}

/* 优化历史记录对话框 */
:deep(.el-dialog__header) {
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    border-bottom: 1px solid #dcdfe6;
}

:deep(.el-dialog__title) {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
}

:deep(.el-table th) {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    font-weight: 600;
    color: #303133;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: #fafafa;
}

:deep(.el-table__body tr:hover > td) {
    background-color: #f0f7ff !important;
}

/* 优化输入框 */
.chat-input {
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

:deep(.el-textarea__inner) {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
}

:deep(.el-textarea__inner:focus) {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 优化欢迎页面 */
.welcome-section {
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.welcome-content h3 {
    font-size: 28px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
}

.welcome-content p {
    font-size: 16px;
    color: #606266;
    line-height: 1.8;
}

/* 优化功能卡片 */
.feature-card {
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    padding: 16px 20px;
    border-bottom: 1px solid #dcdfe6;
}

.card-header span {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.feature-card ul li,
.feature-card ol li {
    margin: 12px 0;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-card ul li .el-icon,
.feature-card ol li .el-icon {
    color: #67c23a;
    font-size: 18px;
}

.settings-container {
    padding: 20px;
}

.api-key-input {
    width: 100%;
}

.save-button {
    width: 100%;
    margin-top: 20px;
}

:deep(.el-dialog__body) {
    padding: 0;
}

:deep(.el-form-item__label) {
    font-weight: 600;
    color: #303133;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #409eff inset;
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409eff inset;
}

/* 移除欢迎页面的API密钥部分 */
.welcome-section .api-key-section {
    display: none;
}

/* 优化设置对话框样式 */
:deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
}

:deep(.el-dialog__header) {
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
    border-bottom: 1px solid #dcdfe6;
}

:deep(.el-dialog__title) {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
}

:deep(.el-dialog__headerbtn) {
    top: 20px;
    right: 20px;
}

:deep(.el-dialog__body) {
    padding: 20px;
}

/* 优化按钮样式 */
:deep(.el-button--warning) {
    background: linear-gradient(135deg, #e6a23c 0%, #d48806 100%);
    border: none;
}

:deep(.el-button--warning:hover) {
    background: linear-gradient(135deg, #ebb563 0%, #e6a23c 100%);
}

/* Markdown 样式 */
.markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    word-wrap: break-word;
}

.markdown-body :deep(pre) {
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
    margin: 16px 0;
}

.markdown-body :deep(code) {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 85%;
    padding: 0.2em 0.4em;
    margin: 0;
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
}

.markdown-body :deep(pre code) {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    word-break: normal;
    white-space: pre;
}

.markdown-body :deep(p) {
    margin-top: 0;
    margin-bottom: 16px;
}

.markdown-body :deep(h1),
.markdown-body :deep(h2),
.markdown-body :deep(h3),
.markdown-body :deep(h4),
.markdown-body :deep(h5),
.markdown-body :deep(h6) {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.markdown-body :deep(h1) { font-size: 2em; }
.markdown-body :deep(h2) { font-size: 1.5em; }
.markdown-body :deep(h3) { font-size: 1.25em; }
.markdown-body :deep(h4) { font-size: 1em; }
.markdown-body :deep(h5) { font-size: 0.875em; }
.markdown-body :deep(h6) { font-size: 0.85em; }

.markdown-body :deep(ul),
.markdown-body :deep(ol) {
    padding-left: 2em;
    margin-top: 0;
    margin-bottom: 16px;
}

.markdown-body :deep(blockquote) {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
    margin: 0 0 16px 0;
}

.markdown-body :deep(table) {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 16px 0;
    width: 100%;
}

.markdown-body :deep(table th),
.markdown-body :deep(table td) {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

.markdown-body :deep(table tr) {
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
}

.markdown-body :deep(table tr:nth-child(2n)) {
    background-color: #f6f8fa;
}

.markdown-body :deep(img) {
    max-width: 100%;
    box-sizing: content-box;
    background-color: #fff;
}

/* 代码块样式优化 */
.markdown-body :deep(.hljs) {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #333;
    background: #f8f8f8;
}

/* 行内代码样式 */
.markdown-body :deep(p code) {
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-size: 85%;
    margin: 0;
    padding: 0.2em 0.4em;
}

/* 代码块容器样式 */
.markdown-body :deep(pre) {
    position: relative;
    margin: 1em 0;
    padding: 1em;
    background: #f6f8fa;
    border-radius: 6px;
    overflow: auto;
}

/* 代码块语言标签 */
.markdown-body :deep(pre code::before) {
    content: attr(class);
    position: absolute;
    top: 0;
    right: 0;
    color: #666;
    font-size: 0.8em;
    padding: 0.2em 0.5em;
    background: #e1e4e8;
    border-radius: 0 6px 0 6px;
}

/* 优化消息气泡中的代码显示 */
.message-content.ai .markdown-body {
    max-width: 100%;
    overflow-x: auto;
}

.message-content.ai .markdown-body pre {
    margin: 8px 0;
    max-width: 100%;
}

.message-content.ai .markdown-body code {
    word-break: break-word;
}

/* 优化表格在消息气泡中的显示 */
.message-content.ai .markdown-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 8px 0;
}

/* 优化图片在消息气泡中的显示 */
.message-content.ai .markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

.input-container {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.upload-button {
    margin-top: 2px;
}

.upload-button :deep(.el-upload) {
    display: block;
}

.upload-button :deep(.el-button) {
    padding: 8px 12px;
    height: auto;
}

.upload-button :deep(.el-button .el-icon) {
    font-size: 18px;
}

/* 优化上传按钮样式 */
.upload-button :deep(.el-button--primary) {
    background: linear-gradient(135deg, #409eff 0%, #2b85e4 100%);
    border: none;
}

.upload-button :deep(.el-button--primary:hover) {
    background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
}

/* 优化输入框容器样式 */
.chat-input {
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border: 1px solid #dcdfe6;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 优化输入框样式 */
:deep(.el-textarea__inner) {
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
    padding: 12px;
    line-height: 1.5;
    font-size: 14px;
}

:deep(.el-textarea__inner:focus) {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 优化发送按钮样式 */
:deep(.el-input-group__append) {
    padding: 0;
    border: none;
    background: transparent;
}

:deep(.el-input-group__append .el-button) {
    border-radius: 0 8px 8px 0;
    margin: 0;
    height: 100%;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
}

:deep(.el-input-group__append .el-button .el-icon) {
    margin-right: 4px;
}
</style> 